<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="../css/main.css" />
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>
</head>
<body>
    <div id="Catalog">
        <h3>Account Information</h3>

        <table>
            <tr>
                <td><input class="input-sign" type="text" name="firstName" th:text="${session.account.firstName}"  placeholder="First name"/></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="${session.account.lastName}" ></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td th:text="${session.account.email}" ></td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td th:text="${session.account.phone}" ></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="${session.account.addr1}" ></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="${session.account.addr2}" ></td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="${session.account.city}" /></td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="${session.account.state}" /></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="${session.account.zip}" /></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="${session.account.country}" /></td>
            </tr>
        </table>
        <h3>Profile Information</h3>

        <table>
            <tr>
                <td>Language Preference:</td>
                <td>
                    <select name="languagePreference">
                        <option value="english" selected="selected">english</option>
                        <option value="japanese">japanese</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Favourite Category:</td>
                <td>
                    <select name="favouriteCategoryId">
                        <option value="FISH">FISH</option>
                        <option selected="selected" value="DOGS">DOGS</option>
                        <option value="REPTILES">REPTILES</option>
                        <option value="CATS">CATS</option>
                        <option value="BIRDS">BIRDS</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Enable MyList</td>
                <td><input type="checkbox" name="listOption" value="${sessionScope.account.listOption}"/></td>
            </tr>
            <tr>
                <td>Enable MyBanner</td>
                <td><input type="checkbox" name="bannerOption" value="${sessionScope.account.bannerOption}"/></td>
            </tr>

        </table>
    </div>
</body>
</html>